<template>
	<view class="container">
<!--		&lt;!&ndash; 获取微信头像和微信昵称 &ndash;&gt;
		<view style="margin: 30px;">
			<view class="userInfoZone">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				  <image class="avatar" :src="avatarUrl"></image>
				</button>
				<view class="inputZone">
					<view class="inputDivZone">
						<view class="nicknameZone">昵称</view>
						<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
					</view>
				</view>
			</view>
		</view>
		
		&lt;!&ndash; 获取微信手机号 接口API需要进行企业认证&ndash;&gt;
		<view style="margin: 30px;">
			<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
		</view>-->
		
		<up-button style="width: 150px;" @click="logout" type="primary" :plain="true" text="镂空">退出登陆</up-button>
		
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="info" title="提示" :content="diaContent" mode="base" :duration="2000" :before-close="true" @close="close"  @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { useCustomerStore } from '@/stores/customer.js'
	
	//用户仓库数据
	const customerStore = useCustomerStore();
	//=========对话框==========
	const diaContent = ref('是否退出当前账号？');
	const popup = ref();//对话框标识
	const close = () => {
		popup.value.close();
	}
	const confirm = () => {
		clearUserInfo();
		popup.value.close();
	}
	//=========对话框==========
	
	const logout = () => {
		popup.value.open();
	}
	
	const clearUserInfo = () => {
		console.log("测试输出");
		// 清除token
		customerStore.removeToken();
		//清空用户信息
		customerStore.setCustomerInfo({
				customerId: '',
				customerName: '',
				gender: '',
				email: '',
				phoneNumber: '',
			  });
		// 跳转到登陆页面
		uni.navigateTo({
			url: '/pages/login/login?routeType=logout'
		})
	}
	

	//=========获取微信头像和昵称=========
	const avatarUrl = ref('https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0');
	const onChooseAvatar = (e) => {
		avatarUrl.value = e.detail 
		console.log("获取的头像====>",avatarUrl.value);
	}
	//=========获取微信头像和昵称=========
	
	//=========获取微信手机号=========
	const getPhoneNumber = (e) => {
	    console.log(e.detail.code)  // 动态令牌
	    console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
		console.log(e.detail.errno)  // 错误码（失败时返回）
	}
	//=========获取微信手机号=========
</script>

<style lang="scss">
.container{
	overflow: hidden;
	min-height: 100%;
	background-color: #fff;
	.userInfoZone{
		button::after{ border: none; }
		.avatar-wrapper{
			width: 60px;
			height: 60px;
			padding: 0px;
			border: none;
			.avatar{
				width: 60px;
				height: 60px;
			}
		}
		.inputZone{
			margin-top: 20px;
			border-bottom: 1px solid #f4f4f7; 
			border-top: 1px solid #f4f4f7;
			.inputDivZone{
				display: flex;
				align-items: center;
				height: 45px;
				.weui-input{
					height: 36px;
				}
				.nicknameZone{
					font-weight: 570;
					margin-left: 10px;
					margin-right: 70px;
				}
			}
		}
	}
}
</style>
